<template>
<!--    <div>-->
<!--        &lt;!&ndash;第三步：使用组件&ndash;&gt;-->
<!--        <Tou :num="n"></Tou>-->

<!--        <p></p>-->
<!--        登录页面-->
<!--        <p></p>-->
<!--        &lt;!&ndash;使用组件随便定义一个值，把父组件的参数值赋值给该属性，子组件用props属性来接受参数传递的值&ndash;&gt;-->
<!--        <Wei :num="n"></Wei>-->
<!--    </div>-->


    <div id="loginBox">
        <el-form :label-position="labelPosition" :model="loginForm" status-icon :rules="loginRules" ref="ruleForm"  label-width="80px" class="demo-ruleForm" id="loginForm">
            <el-form-item style="font-weight: bolder" label="邮箱:" prop="username">
                <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item style="font-weight: bolder" label="密码:" prop="password">
                <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="d" type="primary" @click="login()">登录</el-button>
                <el-button class="z" @click="zc()">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    //第一步：导入组件
    import Tou from "../components/Tou"
    import Wei from "../components/Wei"
    export default {
        name: "Login",
        //第二步：注册组件,多个组件用逗号隔开
        components:{
           Tou,Wei
        },
        data(){
            return{
                n:120,
                loginForm:{username: "",password: ""},
                labelPosition:'left',
                //登录的规则
                loginRules:{
                    username:[
                        { required: true, message: '请输入账号', trigger: 'blur' },
                    ],
                    password:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ]
                },

            }
        },
        methods:{
            login(){
                this.$http.post("http://localhost:8080/login?username="+this.loginForm.username+"&password="+this.loginForm.password).then(resp=>{
                    if (resp.data.code === 200){
                        this.$message.success(resp.data.msg);
                        //获取服务器相应的token值，并保存到LocalStorage
                        localStorage.setItem("token",resp.data.data);
                        //登录成功，使用路跳转
                        this.$router.push("/admin");
                    }else if (resp.data.code === 500){
                        this.$message.error(resp.data.msg);
                    }
                })
            }
        }
    }
</script>

<style scoped>
#loginBox{
    width: 500px;
    height: 300px;
    margin: 100px auto;

}
</style>